﻿@{
    ViewBag.Title = "聊天";
}

<h2>Chat</h2>
<div class="container">
    <input type="button" id="get-exception" value="获取异常" />
    <input type="text" id="message" />
    <input type="button" id="send-message" value="Send" />
    <input type="hidden" id="display-name" />
    <ul id="discussion"></ul>
</div>
@section scripts {
    <!--注意：这里的jQuery脚本已经在模板页_Layout.cshtml中引用-->
    <script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>
    <!--signalr自动生成的脚本，只有当使用自动代理时才要引用-->
    <script src="~/signalr/hubs"></script>
    @*<script src="http://localhost:17437/signalr/hubs"></script>*@
    <script>
        //$(function () {
        //    //Don't set jQuery.support.cors to true in your code.在跨域的时候
        //    //$.connection.hub.start({ transport: 'longPolling' });指定连接方式："webSockets" "foreverFrame" "serverSentEvents" "longPolling"
        //    //$.connection.hub.transport.name 获取正在使用的传输方式
        //    //$.connection.hub.url = "http://localhost:17437/signalr"; //指定hub的url,比如www.baidu.com/signalr,默认为“/signalr”,即当前域名下
        //    //$.connection.hub.qs = {"version":"1.0"}; 设置http query string
        //    //    $.connection.hub.logging = true;

        //    //不使用代理
        //    //var connectionWithoutProxy = $.hubConnection("/signalr", { useDefaultPath: false });

        //    //错误处理



        //    //声明hub代理
        //    var chat = $.connection.chatHub;

        //    chat.client.error = function (error) {
        //        alert('SignalR error: ' + error);
        //    };

        //    //填充状态以在客户端与服务端之间传递
        //    chat.state.userName = "贾建军";
        //    chat.state.computerName = "PC";

        //    //创建后端要调用的前端function
        //    chat.client.addNewMessageToPage = function (name, message) {
        //        //将信息添加到页面上
        //        $('#discussion').append('<li><strong>' + htmlEncode(name) + '</strong>:' + htmlEncode(message) + '</li>');
        //    };
        //    //获取输入的名称
        //    $('#display-name').val(prompt('请输入昵称：', ''));
        //    //将焦点定位在信息输入框中
        //    $('#message').focus();
        //    //开启链接
        //    $.connection.hub.start().done(function () {
        //        $('#send-message').click(function () {
        //            //调用后台hub的Send方法
        //            chat.server.send($('#display-name').val(), $('#message').val());

        //            console.log(chat.server.send($('#message').val()));
        //            //仅仅自己客户端获取数据
        //            chat.server.send($('#message').val()).done(function (message) {
        //                console.log(message);
        //            })

        //            chat.server.doLongRuningThing()
        //                .progress(function (update) {
        //                    console.log("已完成:" + update + "%");
        //                })
        //                .done(function (msg) {
        //                    console.log(msg);
        //                })

        //            //清除发送的内容，并将焦点定位到信息框
        //            $('#message').val('').focus();
        //        });

        //        chat.server.passStateWithClientAndServer().done(function () {
        //            console.log(chat.state);
        //            //alert(`userName: ${chat.state.userName}`);
        //            //alert(`computerName:${chat.state.computerName}`);
        //            //alert(`source:${chat.state.message}`);
        //        })

        //        $("#get-exception").click(function () {
        //            chat.server.getHubException();
        //            //.fail(function (e) {
        //            //if (e.source == 'HubException') {
        //            //    alert(`userName:${e.data.userName}\nmessage:${e.message}`);
        //            //}
        //            //})
        //        })
        //    });

        //    //网络慢
        //    $.connection.hub.connectionSlow(function () {

        //    })
        //    //重连中
        //    $.connection.hub.reconnecting(function () {

        //    })
        //    //已重连成功
        //    $.connection.hub.reconnected(function () {

        //    })
        //    //已断开
        //    $.connection.hub.disconnected(function () {
        //        //自动重连
        //        setTimeout(function () {
        //            $.connection.hub.start();
        //        }, 5000);
        //    })

        //    //该function防止JS注入
        //    function htmlEncode(value) {
        //        var encodeValue = $('<div/>').text(value).html();
        //        return encodeValue;
        //    }
        //});
    </script>
    <script>
        //不使用自动代理
        $(function () {
            var connection = $.hubConnection("http://localhost:17437/signalr", { useDefaultPath: false });
            alert(connection.url);

            //connection.url = "/signalr";
            var contosoChatHubProxy = connection.createHubProxy('chatHub');
            contosoChatHubProxy.on('showstations', function (msg) {
                console.log(msg);
            });
            connection.start().done(function () {
                console.log(contosoChatHubProxy.invoke("send", "1"));
                contosoChatHubProxy
                    .invoke("send", "1")
                    .done(function (data) {
                        alert(data);
                    })

            });

            connection.error(function (error) {
                alert('SignalR error: ' + error)
            });
        })
    </script>
}